import { Text } from '@react-navigation/elements';
import { px2dp } from '../../../utils/pixel-adapter';
import { Card } from './card';
import { View, StyleSheet, Pressable } from 'react-native';


const lovely = [
    {
        id: 1,
        title: '最后的告白',
        desc: '告五人 - 我肯定在几百年前就已经不在了哈哈哈哈',
    },
    {
        id: 2,
        title: '还是会想你',
        desc: '林达浪 - 还是会想你',
    }
];

export function Lovely() {
    return (
        <Card title="猜你喜欢" rightDesc="更多">
            <View>
                {
                    lovely.map((item) => {
                        return (
                            <View key={item.id} style={styles.lovelyItem}>
                                <View style={styles.leftBox}>
                                    <View style={styles.coverBox}>
                                    </View>
                                    <View style={styles.songInfo}>
                                        <Text style={styles.title}>{item.title}</Text>
                                        <Text numberOfLines={1} style={styles.desc}>{item.desc}</Text>
                                    </View>
                                </View>
                                <Pressable style={({  pressed }) => {
                                    return [styles.playBox, pressed && styles.playBoxPressed];
                                }}>
                                    <Text style={[styles.playIcon, { fontFamily: 'iconfont' }]}>{'\ue61c'}</Text>
                                </Pressable>
                            </View>
                        )
                    })
                }
            </View>
        </Card>
    )
}

const styles = StyleSheet.create({
    lovelyItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: px2dp(20),
        justifyContent: 'space-between',
    },
    leftBox: {
        flex: 1,
        flexDirection: 'row',
        overflow: 'hidden',
    },
    coverBox: {
        width: px2dp(50),
        height: px2dp(50),
        backgroundColor: '#ccc',
        borderRadius: px2dp(10),
        overflow: 'hidden',
    },
    songInfo: {
        marginLeft: px2dp(10),
        flex: 1,
    },
    title: {
        fontSize: px2dp(14),
        color: '#fff',
    },
    desc: {
        fontSize: px2dp(12),
        color: 'rgb(161, 161, 170)',
        marginTop: px2dp(5),
        ellipsizeMode: 'tail',
    },
    playBox: {
        marginLeft: px2dp(15),
        width: px2dp(36),
        height: px2dp(36),
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: px2dp(18),
    },
    playBoxPressed: {
        backgroundColor: 'rgba(255, 255, 255, 0.3)',
    },
    playIcon: {
        fontSize: px2dp(24),
        color: '#fff',
    }
})